<!-- ==================== 模板部分 - 页面结构 ==================== -->
<template>
  <!-- 主容器 - 学生生活页面 -->
  <div class="studyContainer">
    <!-- 板块1: 综合素质评价区域 -->
    <div class="box2">
      <!-- 板块标题 -->
      <div class="title">综合素质评价</div>
      <!-- 图表容器 - 左右布局 -->
      <div class="xuekjhd-container">
        <!-- 左侧图表区域 - 雷达图 -->
        <div class="xuekjhd-itembox-left">
          <!-- 雷达图容器 -->
          <div ref="radarChart" class="chart-container">
            <!-- 加载状态显示 -->
            <!-- <div v-if="loading" class="loading-container">
              <div class="loading-text">加载中...</div>
            </div> -->
          </div>
        </div>
        <!-- 右侧图表区域 - 柱形图 -->
        <div class="xuekjhd-itembox-right">
<!--          &lt;!&ndash; 返回按钮 - 当显示二级数据时显示 &ndash;&gt;-->
<!--          <div v-if="isShowingSubData" class="back-button" @click="backToOverallData">-->
<!--            <span>返回整体数据</span>-->
<!--          </div>-->
          <!-- 柱形图容器 -->
          <div ref="barZongHSZhPJ" class="chart-container">
            <!-- 加载状态显示 -->
            <!-- <div v-if="loading" class="loading-container">
              <div class="loading-text">加载中...</div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    
    <!-- 板块2: 成长记录区域 -->
    <div class="box1">
      <!-- 板块标题 -->
      <div class="title">成长记录</div>
      <!-- 成长记录容器 -->
      <div class="chengJJL-container">
        <!-- 成长记录项目1: 时间线图表 -->
        <div class="chengJJL-item" style="height: 60%;">
          <!-- 右侧图表区域 -->
          <div class="chengJJL-itembox-right">
            <!-- 时间线图表容器 - 使用G6图形库 -->
            <div id="mountNode" style="width: 100%; height: 100%; margin-top: -10px;"></div>
          </div>
        </div>
        <!-- 成长记录项目2: 详细信息展示 -->
        <div class="chengJJL-item">
          <!-- 信息展示容器 -->
          <div class="chengJJL-itembox">
            
            
            <!-- 无数据时显示提示 -->
            <div v-if="!selectedNodeDetail" style="text-align: center; color: #666; padding-top: 20px;">
              点击上方节点查看详细信息
            </div>
            <!-- 有数据时显示详情 -->
            <div v-else>
              <!-- 活动名称 -->
              <div>名称: {{ selectedNodeDetail.name }}</div>
              <!-- 活动时间 -->
              <div>时间: {{ selectedNodeDetail.date }}</div>
              <!-- 活动详情描述 -->
              <div>
                详情: {{ selectedNodeDetail.desc }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- ==================== 脚本部分 - 逻辑处理 ==================== -->
<script setup>
// 导入Vue组合式API
import { ref, onMounted, reactive, watch,onUnmounted } from "vue";
// 导入ECharts图表库
import * as echarts from "echarts";
// 导入G6图形库 - 用于时间线图表
import { Graph } from "@antv/g6"; // 使用具名导入
// 导入API接口
import { getEvaluateCount, getSubEvaluateCount, getGrowthRecords, getEvaluateDetail } from "@/api/student";
// 导入状态管理
import { useParamsStore } from '@/stores/useParamsStore';
// 导入路由
import { useRoute } from 'vue-router';
import { id } from "element-plus/es/locales.mjs";

// ==================== 响应式数据定义 ====================
// 综合素质评价相关
const barZongHSZhPJ = ref(null); // 柱形图DOM引用
const lineChat = ref(null); // 线图DOM引用
const radarChart = ref(null); // 雷达图DOM引用
const curveOffset = ref(20); // 曲线偏移量
const evaluateData = ref([]); // 评价数据
const loading = ref(false); // 加载状态

// 新增：二级联动相关数据
const subEvaluateData = ref([]); // 二级评价数据
const currentSelectedDimension = ref(null); // 当前选中的维度
const isShowingSubData = ref(false); // 是否显示二级数据

// 获取store和路由实例
const paramsStore = useParamsStore();
const route = useRoute();

// G6图形数据配置
const data = {
  // 节点集合
  nodes: [
    {
      id: "node0", // 起始节点ID
      style: { x: -80, y: 20, opacity: 0 }, // 节点样式
      data: {}, // 节点数据
    },
  ],
  // 边集合
  edges: [],
};

// 成长记录数据
const growthRecordsData = ref([]);
// 当前选中的节点详情数据
const selectedNodeDetail = ref(null);

// G6图形实例
let graph = reactive(null);
// 方向控制 - 1向上，0向下
let direction = 1;
// 颜色列表 - 用于节点图表配色
const colorList = ["#00FFF0", "#00FFB2"];
// 颜色列表 - 用于图表配色
const colorChartList = ["#00fff1", "#00ffb2", "#00c1ff"]






// ==================== 状态重置函数 ====================
// 重置所有组件状态
const resetAllStates = () => {
  console.log('重置生活板块所有组件状态');
  
  // 重置综合素质评价相关状态
  evaluateData.value = [];
  subEvaluateData.value = [];
  currentSelectedDimension.value = null;
  isShowingSubData.value = false;
  
  // 重置成长记录相关状态
  growthRecordsData.value = [];
  selectedNodeDetail.value = null;
  
  // 重置图表实例
  if (radarChart.value) {
    const existingRadarChart = echarts.getInstanceByDom(radarChart.value);
    if (existingRadarChart) {
      existingRadarChart.dispose();
    }
  }
  
  if (barZongHSZhPJ.value) {
    const existingBarChart = echarts.getInstanceByDom(barZongHSZhPJ.value);
    if (existingBarChart) {
      existingBarChart.dispose();
    }
  }
  
  // 重置G6图表
  if (graph) {
    graph.clear();
    data.nodes = [
      {
        id: "node0",
        style: { x: -80, y: 20, opacity: 0 },
        data: {},
      },
    ];
    data.edges = [];
    direction = 1;
    graph.render();
  }
  
  // 重置雷达图高亮状态
  if (radarChart.value) {
    const chart = echarts.getInstanceByDom(radarChart.value);
    if (chart) {
      const option = chart.getOption();
      if (option.radar && option.radar[0] && option.radar[0].indicator) {
        option.radar[0].indicator.forEach(indicator => {
          indicator.color = '#00DFFD';
        });
        chart.setOption(option);
      }
    }
  }
};

// ==================== 数据获取函数 ====================
// 获取综合素质评价数据
const fetchEvaluateData = async (studentId) => {
  try {
    loading.value = true; // 设置加载状态
    
    // 先重置状态，确保清除上一个学生的数据
    resetAllStates();
    
    const response = await getEvaluateCount(studentId); // 调用API
    if (response.code === 0) { // 请求成功
      evaluateData.value = response.data; // 更新数据
      // 重置二级数据状态
      subEvaluateData.value = [];
      currentSelectedDimension.value = null;
      isShowingSubData.value = false;
      updateCharts(); // 更新图表
    }
  } catch (error) {
    console.error('获取综合素质评价数据失败:', error); // 错误处理
  } finally {
    loading.value = false; // 结束加载状态
  }
};

// 获取成长记录数据
const fetchGrowthRecords = async (studentId) => {
  try {
    loading.value = true; // 设置加载状态
    console.log('开始获取成长记录数据，学生ID:', studentId);
    
    const response = await getGrowthRecords(studentId); // 调用API
    console.log('成长记录接口响应:', response);
    if (response.code === 0) { // 请求成功
      // 按时间排序，从近期到远期
      growthRecordsData.value = response.data.sort((a, b) => {
        return new Date(b.date) - new Date(a.date);
      });
      console.log('排序后的成长记录数据:', growthRecordsData.value);
      updateGrowthChart(); // 更新成长记录图表
      
      // 默认选中第一个节点并显示其详情
      if (growthRecordsData.value.length > 0) {
        const firstNode = growthRecordsData.value[0];
        const nodeId = firstNode.evaluation_item_id || firstNode.id;
        if (nodeId) {
          console.log('默认选中第一个节点，ID:', nodeId);
          fetchNodeDetail(nodeId);
        }
      }
    }
  } catch (error) {
    console.error('获取成长记录数据失败:', error); // 错误处理
  } finally {
    loading.value = false; // 结束加载状态
  }
};

// 获取节点详情数据
const fetchNodeDetail = async (id) => {
  const nodes = graph.getNodeData()
  const newNodes = nodes.map((item, index) => {
    return {
      ...item,
      style: {
        ...item.style,  
        fill: item.data.id === id ? '#FAFF00' : colorList[index % colorList.length]
      }
    }
  })
  graph.updateNodeData(newNodes);
  graph.draw()
  try {
    loading.value = true; // 设置加载状态
    console.log('开始获取节点详情，ID:', id);
    const response = await getEvaluateDetail(id); // 调用API
    console.log('节点详情接口响应:', response);
    if (response.code === 0) { // 请求成功
      selectedNodeDetail.value = response.data[0]; // 更新详情数据
      console.log('更新后的节点详情:', selectedNodeDetail.value);
      console.log('selectedNodeDetail.value的类型:', typeof selectedNodeDetail.value);
      console.log('selectedNodeDetail.value的内容:', selectedNodeDetail.value);
    } else {
      console.error('接口返回错误:', response);
    }
  } catch (error) {
    console.error('获取节点详情数据失败:', error); // 错误处理
  } finally {
    loading.value = false; // 结束加载状态
  }
};

// 获取二级评价数据
const fetchSubEvaluateData = async (studentId, pid) => {
  try {
    loading.value = true; // 设置加载状态
    const response = await getSubEvaluateCount(studentId, pid); // 调用API
    if (response.code === 0) { // 请求成功
      subEvaluateData.value = response.data; // 更新二级数据
      isShowingSubData.value = true; // 标记显示二级数据
      updateBarChart(); // 更新柱状图显示二级数据
    }
  } catch (error) {
    console.error('获取二级评价数据失败:', error); // 错误处理
  } finally {
    loading.value = false; // 结束加载状态
  }
};

// 返回整体数据
// const backToOverallData = () => {
//   console.log('返回整体数据');
//   isShowingSubData.value = false;
//   currentSelectedDimension.value = null;
//   subEvaluateData.value = [];
//   updateBarChart(); // 更新柱状图显示整体数据
//   chooseLabel(-1);
// };

// ==================== 图表更新函数 ====================
// 更新所有图表数据
const updateCharts = () => {
  if (evaluateData.value.length === 0) return; // 数据为空则返回
  
  // 更新柱形图
  updateBarChart();
  
  // 更新雷达图
  updateRadarChart();
};

// ==================== G6时间线图表相关函数 ====================
// 更新成长记录图表
const updateGrowthChart = () => {
  console.log('开始更新成长记录图表');
  console.log('graph实例:', graph);
  console.log('成长记录数据:', growthRecordsData.value);
  if (!graph || growthRecordsData.value.length === 0) {
    console.log('图表更新条件不满足，graph:', !!graph, '数据长度:', growthRecordsData.value.length);
    return;
  }
  
  // 清空现有数据
  data.nodes = [
    {
      id: "node0", // 起始节点ID
      style: { x: -80, y: 20, opacity: 0 }, // 节点样式
      data: {}, // 节点数据
    },
  ];
  data.edges = [];
  
  // 重置方向
  direction = 1;
  
  // 根据接口数据创建节点
  growthRecordsData.value.forEach((item, index) => {
    console.log(`创建节点 ${index + 1} 的数据:`, item);
    console.log(`节点 ${index + 1} 的evaluation_item_id:`, item.evaluation_item_id);
    console.log(`节点 ${index + 1} 的id:`, item.id);
    // 计算节点位置
    const x = data.nodes[data.nodes.length - 1].style.x + 100; // X坐标递增
    const beforeY = data.nodes[data.nodes.length - 1].style.y; // 获取前一个节点的Y坐标
    const y = direction === 1 ? beforeY + 40 : beforeY - 40; // 根据方向计算Y坐标
    
    // 添加新节点
    data.nodes.push({
      id: "node" + (index + 1), // 节点ID
      data: {
        id: item.evaluation_item_id || item.id, // 优先使用evaluation_item_id，如果没有则使用id
        title: item.evaluate_category, // 使用evaluate_category作为标题
        desc: item.name, // 使用name作为描述
        date: item.date, // 时间信息
        originalData: item // 保存原始数据
      },
      style: {
        x, // X坐标
        y, // Y坐标
        size: 14, // 节点大小
        halo: true, // 启用光晕效果
        fill: colorList[index % colorList.length], // 节点颜色
        cursor: 'pointer', // 鼠标指针样式
      },
    });
    
    // 设置曲线偏移量
    if (y == 20) {
        curveOffset.value = 20; // 向上偏移
    } else if (y == 100) {
        curveOffset.value = -20; // 向下偏移
    }
    
    // 添加连接边
    data.edges.push({
      id: "edge" + index, // 边ID
      source: "node" + index, // 起始节点
      target: "node" + (index + 1), // 目标节点
      type: "quadratic", // 二次曲线类型
      style: {
        curveOffset: curveOffset.value, // 曲线偏移
        stroke: "#00f1ff", // 边颜色
        lineWidth: 2, // 边宽度
      },
    });
    
    // 方向控制逻辑
    if (y == 100) {
      direction = 0; // 达到上限，向下
    } else if (y == 20) {
      direction = 1; // 达到下限，向上
    }
  });
  
  // 清空图形实例并重新添加数据
  graph.clear();
  graph.addNodeData(data.nodes);
  graph.addEdgeData(data.edges);
  getNodeLabel(); // 获取节点标签
  
  // 重新渲染图形
  graph.render();
  
  // 添加节点点击事件（在渲染后添加）
  setTimeout(() => {
    addNodeClickEvents();
  }, 100);
};

// 创建时间线节点（保留原函数，但不再使用）
function createNode() {
  // 这个函数保留但不使用，因为我们现在使用updateGrowthChart
}

// ==================== ECharts图表更新函数 ====================
// 更新柱形图
const updateBarChart = () => {
      if (barZongHSZhPJ.value) {
        const existingChart = echarts.getInstanceByDom(barZongHSZhPJ.value);
        if (existingChart) existingChart.dispose();
    }
  if (!barZongHSZhPJ.value) return; // DOM不存在则返回
  
  const barChart = echarts.init(barZongHSZhPJ.value); // 初始化图表
  
  // 根据是否显示二级数据来决定显示的数据
  let names, counts, title;
  
  if (isShowingSubData.value && subEvaluateData.value.length > 0) {
    // 显示二级数据
    names = subEvaluateData.value.map(item => item.name);
    counts = subEvaluateData.value.map(item => item.count);
    title = `${currentSelectedDimension.value} `;
  } else {
    // 显示一级数据
    names = evaluateData.value.map(item => item.name);
    counts = evaluateData.value.map(item => item.count);
    title = "综合素质评价";
  }
  
  // 柱形图配置选项
  const option = {
    title: {
      text: title, // 图表标题
      left: "center", // 标题居中
      top: "top", // 标题位置
      textStyle: {
        color: "#00FFF0", // 标题颜色
        fontSize: 14, // 标题字体大小
        fontWeight: 400,
      },
    },
    grid: {
      top: 50, // 上边距
      right: 20, // 右边距
      bottom: 50, // 下边距
      left: 30, // 左边距
    },
    tooltip: {}, // 提示框配置
    xAxis: {
      data: names, // X轴数据
      axisLine: {
        lineStyle: {
          color: "#0094ff", // X轴线颜色
        },
      },
      axisTick: {
        lineStyle: {
          color: "#00FFF0", // X轴刻度线颜色
        },
      },
      axisLabel: {
        color: "#fff", // X轴标签颜色
        interval: 0,
        rotate: -30, // 标签旋转角度
      },
    },
    yAxis: {
      type: "value", // Y轴类型
      axisLine: {
        lineStyle: {
          color: "#00FFF0", // Y轴线颜色
        },
      },
      splitLine: {
        lineStyle: {
          color: "#0094ff", // Y轴分割线颜色
        },
      },
      axisLabel: {
        show: true, // 显示Y轴标签
        color: "#fff", // Y轴标签颜色
      },
    },
    series: [
      {
        type: "bar", // 图表类型：柱形图
        barWidth: 27, // 柱子宽度
        data: counts, // 数据
        label: {
          show: true, // 显示数据标签
          position: "top", // 标签位置
          formatter: "{c}", // 标签格式
          color: "#fff", // 标签颜色
        },
        itemStyle: {
          color: function (params) {
            return colorChartList[params.dataIndex % colorChartList.length]; // 动态颜色
          },
        },
      },
    ],
  };
  
  barChart.setOption(option); // 设置图表选项
};

// 更新雷达图
const updateRadarChart = () => {
  if (radarChart.value) {
    const existingChart = echarts.getInstanceByDom(radarChart.value);
    if (existingChart) existingChart.dispose();
  }

  if (!radarChart.value) return; // DOM不存在则返回

  const radarChartInstance = echarts.init(radarChart.value); // 初始化雷达图
  // 构建雷达图指标
  const indicators = evaluateData.value.map((item, index) => ({
    name: item.name, // 指标名称
    max: Math.max(...evaluateData.value.map(d => d.count)) + 1, // 最大值
    // 添加更多指标信息用于点击识别
    id: item.id || index, // 指标ID
    value: item.count, // 指标值
    index: index // 指标索引
  }));

  const values = evaluateData.value.map(item => item.count); // 提取数值

  // 雷达图配置选项
  const option = {
    color: colorList, // 颜色配置
    title: {
      // text: "综合素质评价雷达图", // 图表标题
      textStyle: {
        color: "#00FFB2", // 标题颜色
        fontSize: 14, // 标题字体大小
      },
    },
    tooltip: {
      trigger: 'item', // 触发类型
      renderMode: 'richText',
      formatter: function (params) {
        // 自定义提示框内容
        if (params.componentType === 'series' && params.seriesType === 'radar') {
          return `${params.name}\n值: ${params.value}`;
        } else if (params.componentType === 'radar') {
          return `${params.name}\n点击查看详情`;
        }
        return params.name;
      },
      rich: {
        default: {
          color: '#fff',
          fontSize: 13
        },
      },
    },
    legend: {
      show: true, // 显示图例
      textStyle: {
        fontSize: 14, // 图例字体大小
        color: function (params) {
          return params.color; // 图例颜色
        },
      },
      data: ["个人评价"], // 图例数据
      top: "86%", // 图例位置
      left: "center", // 图例居中
      icon: "circle", // 图例图标
      itemStyle: {
        borderRadius: "50%", // 图例圆角
      },
    },
    radar: {
      indicator: indicators, // 雷达图指标
      center: ["50%", "45%"], // 雷达图中心位置
      radius: 66, // 雷达图半径
      axisNameGap: 10,
      // 启用雷达图交互
      axisName: {
        formatter: function(value, indicator) {
          // 根据条件返回不同的富文本格式
          if (indicator.isChecked) {
            return '{checked|' + value + '}';
          } else {
            return '{default|' + value + '}';
          }
        },
        rich: {
          checked: {
            color: '#01F5FC',
            borderWidth: 1,
            fontSize: 13,
            borderColor: '#00DFFD',
            borderRadius: 2,
            backgroundColor: 'rgba(0,178,255,0.2)',
            padding: [4, 6]
          },
          default: {
            color: '#fff',
            fontSize: 13
          },
        },
        show: true, // 显示轴名称
      },
      triggerEvent: true, // 启用轴名称点击事件
      axisLine: {
        show: true, // 显示轴线
        triggerEvent: true, // 启用轴线点击事件
      },
      axisTick: {
        show: false, // 隐藏刻度
        triggerEvent: true, // 启用刻度点击事件
      },
      axisLabel: {
        show: false, // 隐藏轴标签
        triggerEvent: true, // 启用轴标签点击事件
      },
      splitLine: {
        show: true, // 显示分割线
        triggerEvent: true, // 启用分割线点击事件
      },
      splitArea: {
        show: false, // 不显示分割区域
      },
    },
    series: [
      {
        type: "radar", // 图表类型：雷达图
        data: [
          {
            value: values, // 数据值
            name: "个人评价", // 系列名称
            symbolSize: 10, // 数据点大小
            // 为每个数据点添加点击事件支持
            itemStyle: {
              color: colorList[0], // 数据点颜色
            },
            areaStyle: {
              // 区域渐变填充
              color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                {
                  color: "rgba(0, 255, 240, 0.3)", // 起始颜色
                  offset: 0,
                },
                {
                  color: "rgba(0, 255, 240, 1)", // 结束颜色
                  offset: 1,
                },
              ]),
            },
            label: {
              show: false, // 不显示标签
              formatter: function (params) {
                return params.value; // 标签格式化
              },
            },
            // 添加数据点点击事件支持
            // emphasis: {
            //   itemStyle: {
            //     color: "#00FFB2", // 悬停时的颜色
            //   },
            // },
          },
        ],
      },
    ],
  };

  radarChartInstance.setOption(option); // 设置雷达图选项

  // 添加雷达图点击事件监听
  radarChartInstance.on('click', function (params) {
    console.log('雷达图点击事件:', params);
    
    // 判断点击的是雷达图组件
    if (params.componentType === 'radar') {
      // 获取点击的维度信息
      const clickedDimension = params.name.substring(1, params.name.length - 1).split('|')[1];
      const clickedValue = params.value;
      const clickedIndex = params.dataIndex;
      const componentSubType = params.componentSubType;
      
      console.log('点击的维度:', clickedDimension);
      console.log('点击的值:', clickedValue);
      console.log('点击的索引:', clickedIndex);
      console.log('组件子类型:', componentSubType);
      
      // 根据点击的组件子类型执行相应操作
      if (componentSubType === 'axisName') {
        // 点击的是轴名称
        handleAxisNameClick(clickedDimension);
      } else if (componentSubType === 'axisLine' || componentSubType === 'axisTick' || componentSubType === 'axisLabel') {
        // 点击的是轴线、刻度或标签
        handleAxisClick(clickedDimension, clickedIndex);
      } else {
        // 点击的是雷达图数据点
        handleRadarClick(clickedDimension, clickedValue, clickedIndex);
      }
    }
  });

  // 添加雷达图系列点击事件监听
  radarChartInstance.on('click', function (params) {
    if (params.componentType === 'series' && params.seriesType === 'radar') {
      console.log('点击了雷达图系列:', params);
      
      // 获取点击的数据点信息
      const dataIndex = params.dataIndex;
      const seriesIndex = params.seriesIndex;
      const value = params.value;
      const name = params.name;
      
      console.log('数据索引:', dataIndex);
      console.log('系列索引:', seriesIndex);
      console.log('值:', value);
      console.log('名称:', name);
      
      // 根据数据索引获取对应的维度名称
      if (evaluateData.value[dataIndex]) {
        const dimensionName = evaluateData.value[dataIndex].name;
        const dimensionValue = evaluateData.value[dataIndex].count;
        
        console.log('点击的雷达图维度:', dimensionName);
        console.log('维度值:', dimensionValue);
        
        // 处理雷达图数据点点击
        handleRadarDataPointClick(dimensionName, dimensionValue, dataIndex);
      }
    }
  });

  // 添加雷达图指示器点击事件监听
  radarChartInstance.on('click', function (params) {
    if (params.componentType === 'radar' && params.componentSubType === 'indicator') {
      console.log('点击了雷达图指示器:', params);
      
      // 获取点击的指示器信息
      const indicatorName = params.name;
      const indicatorIndex = params.dataIndex;
      
      console.log('指示器名称:', indicatorName);
      console.log('指示器索引:', indicatorIndex);
      
      // 处理指示器点击
      handleIndicatorClick(indicatorName, indicatorIndex);
    }
  });
  radarChartInstance.off('mouseout')
  radarChartInstance.off('mousemove')
  // 添加雷达图鼠标悬停事件监听
  console.log('鼠标悬停在雷达图--------------------------:', radarChartInstance);
  // radarChartInstance.on('mousemove', function (params) {
  //   console.log('鼠标悬停在雷达图:', params);
  //   if (params.componentType === 'radar' && params.targetType === 'axisName') {
  //     // 可以在这里添加悬停效果
  //     radarChartInstance.dispatchAction({
  //       type: 'hideTip'
  //     })
  //   }
  // });
};

function chooseLabel(index) {
  const chart = echarts.getInstanceByDom(radarChart.value);
  const option = chart.getOption();
  // 重置所有标签样式
  option.radar[0].indicator.forEach((indicator, indicatorIdx) => {
    indicator.isChecked = indicatorIdx === index;
  });
  chart.setOption(option);
}

// 处理雷达图点击事件
const handleRadarClick = (dimension, value, index) => {
  console.log(`点击了雷达图维度: ${dimension}, 值: ${value}, 索引: ${index}`);
  
  // 获取学生ID
  const studentId = route.query.personCode || paramsStore.personCode;
  if (!studentId) {
    console.error('学生ID不存在');
    return;
  }
  
  // 根据点击的维度执行相应操作
  switch(dimension) {
    case '思想品德':
    case '学业水平':
    case '身心健康':
    case '艺术修养':
    case '社会实践':
    case '特色教育':
    case '理想信念':
    case '社会责任':
    case '担当奉献':
    case '家庭美德':
    case '典型实例':
    case '党团、社团活动':
    case '荣誉称号':
    case '公益活动':
      // 查找对应的维度数据
      const dimensionIndex = evaluateData.value.findIndex(item => item.name === dimension);
      const dimensionData = evaluateData.value[dimensionIndex];
      if (dimensionData && dimensionData.id) {
        console.log(`处理${dimension}相关逻辑，ID: ${dimensionData.id}`);
        currentSelectedDimension.value = dimension;
        chooseLabel(dimensionIndex);
        // 调用二级数据接口
        fetchSubEvaluateData(studentId, dimensionData.id);
      } else {
        console.error(`未找到${dimension}对应的数据`);
      }
      break;
    default:
      console.log('处理其他维度逻辑');
  }
};

// 处理轴名称点击事件
const handleAxisNameClick = (axisName) => {
  console.log(`点击了轴名称: ${axisName}`);
  
  // 获取学生ID
  const studentId = route.query.personCode || paramsStore.personCode;
  if (!studentId) {
    console.error('学生ID不存在');
    return;
  }
  
  // 查找对应的维度数据
  const dimensionData = evaluateData.value.find(item => item.name === axisName);
  if (dimensionData && dimensionData.id) {
    console.log(`处理轴名称点击: ${axisName}, ID: ${dimensionData.id}`);
    currentSelectedDimension.value = axisName;
    // 调用二级数据接口
    fetchSubEvaluateData(studentId, dimensionData.id);
  } else {
    console.error(`未找到${axisName}对应的数据`);
  }
};

// 处理轴线点击事件
const handleAxisClick = (dimension, index) => {
  console.log(`点击了轴线: ${dimension}, 索引: ${index}`);
  
  // 获取学生ID
  const studentId = route.query.personCode || paramsStore.personCode;
  if (!studentId) {
    console.error('学生ID不存在');
    return;
  }
  
  // 查找对应的维度数据
  const dimensionData = evaluateData.value.find(item => item.name === dimension);
  if (dimensionData && dimensionData.id) {
    console.log(`处理轴线点击: ${dimension}, ID: ${dimensionData.id}`);
    currentSelectedDimension.value = dimension;
    // 调用二级数据接口
    fetchSubEvaluateData(studentId, dimensionData.id);
  } else {
    console.error(`未找到${dimension}对应的数据`);
  }
};

// 处理雷达图数据点点击事件
const handleRadarDataPointClick = (dimensionName, dimensionValue, dataIndex) => {
  console.log(`点击了雷达图数据点: ${dimensionName}, 值: ${dimensionValue}, 索引: ${dataIndex}`);
  
  // 获取学生ID
  const studentId = route.query.personCode || paramsStore.personCode;
  if (!studentId) {
    console.error('学生ID不存在');
    return;
  }
  
  // 查找对应的维度数据
  const dimensionData = evaluateData.value.find(item => item.name === dimensionName);
  if (dimensionData && dimensionData.id) {
    console.log(`处理雷达图数据点点击: ${dimensionName}, ID: ${dimensionData.id}`);
    currentSelectedDimension.value = dimensionName;
    // 调用二级数据接口
    fetchSubEvaluateData(studentId, dimensionData.id);
  } else {
    console.error(`未找到${dimensionName}对应的数据`);
  }
};

// 处理雷达图指示器点击事件
const handleIndicatorClick = (indicatorName, indicatorIndex) => {
  console.log(`点击了雷达图指示器: ${indicatorName}, 索引: ${indicatorIndex}`);
  
  // 获取学生ID
  const studentId = route.query.personCode || paramsStore.personCode;
  if (!studentId) {
    console.error('学生ID不存在');
    return;
  }
  
  // 查找对应的维度数据
  const dimensionData = evaluateData.value.find(item => item.name === indicatorName);
  if (dimensionData && dimensionData.id) {
    console.log(`处理指示器点击: ${indicatorName}, ID: ${dimensionData.id}`);
    currentSelectedDimension.value = indicatorName;
    // 调用二级数据接口
    fetchSubEvaluateData(studentId, dimensionData.id);
  } else {
    console.error(`未找到${indicatorName}对应的数据`);
  }
};

// ==================== G6标签处理函数 ====================
// 获取节点标签
function getNodeLabel() {
  // 过滤并映射节点标签
  const nodeLabel = data.nodes.filter((item, index) => index !== 0).map((item) => {
    return {
      type: "html", // 标签类型：HTML
      id: "label" + item.id, // 标签ID
      style: {
        x: item.style.x, // X坐标
        y: item.style.y + 45, // Y坐标（向下偏移）
        size: [160, 60], // 标签大小，增加高度以显示时间
        dx: -80, // X偏移量
        innerHTML: `<div style="width: 80px; font-size: 12px; border-left: 4px solid #00f1ff; padding-left: 6px; margin-left: 78px">
            <div style='border-radius: 2px; padding: 2px 6px; background: linear-gradient(to right, ${item.style.fill}, transparent);'>${item.data.title || ""}</div>
            <div style='margin-top: 4px;'>${item.data.desc || ""}</div>
            <div style='margin-top: 2px; font-size: 10px; color: #00f1ff;'>${item.data.date || ""}</div>
        </div>`, // HTML内容
      },
    };
  });
  
  // 创建标签连接边
  const nodeLabelEdge = nodeLabel.map((item, index) => {
    return {
      id: "labeledge" + index, // 边ID
      source: item.id, // 起始节点
      target: item.id.split('label')[1], // 目标节点
      type: 'line' // 边类型：直线
    };
  });
  
  // 添加标签和连接边到图形实例
  graph.addNodeData(nodeLabel);
  graph.addEdgeData(nodeLabelEdge);
}

// 添加节点点击事件---------
const addNodeClickEvents = () => {
  if (!graph) return;
  
  // 先移除之前的事件监听器，避免重复绑定
  graph.off('node:click');
  
  // 监听节点点击事件
  graph.on('node:click', (evt) => {
    console.log('节点点击事件触发');
    console.log('事件对象:', evt);
    
    try {
      let nodeData = null;
      
      // 在G6 v5中，尝试从evt.target获取数据
      if (evt && evt.target) {
        const target = evt.target;
        console.log('目标对象:', target);
        console.log('目标对象的ID:', target.id);
        
        // 尝试获取节点数据
        if (target.getData && typeof target.getData === 'function') {
          nodeData = target.getData();
        } else if (target.data) {
          nodeData = target.data;
        } else if (target.getModel && typeof target.getModel === 'function') {
          nodeData = target.getModel();
        }
        
        // 如果上面的方法都没有获取到数据，尝试通过节点ID从原始数据中查找
        if (!nodeData && target.id) {
          const nodeIndex = parseInt(target.id.replace('node', '')) - 1;
          console.log('通过节点ID计算的索引:', nodeIndex);
          
          if (nodeIndex >= 0 && growthRecordsData.value[nodeIndex]) {
            const originalItem = growthRecordsData.value[nodeIndex];
            nodeData = {
              id: originalItem.evaluation_item_id || originalItem.id,
              title: originalItem.evaluate_category,
              desc: originalItem.name,
              date: originalItem.date,
              originalData: originalItem
            };
            console.log('通过索引获取的节点数据:', nodeData);
          }
        }
      }
      
      // 如果上面没有获取到，尝试从evt.item获取
      if (!nodeData && evt && evt.item) {
        const node = evt.item;
        console.log('节点对象 (evt.item):', node);
        
        if (node && typeof node.getData === 'function') {
          nodeData = node.getData();
        } else if (node && node.data) {
          nodeData = node.data;
        }
      }
      
      // 如果还是不行，尝试从evt.data获取
      if (!nodeData && evt && evt.data) {
        nodeData = evt.data;
      }
      
      console.log('最终节点数据:', nodeData);
      if (nodeData && nodeData.id) {
        console.log('点击节点，ID:', nodeData.id);
        // 调用接口获取详情
        fetchNodeDetail(nodeData.id);
      } else {
        console.log('节点数据中没有ID');
        console.log('完整的节点数据:', nodeData);
        
        // 尝试从事件对象中获取更多信息
        console.log('事件对象的所有属性:', Object.keys(evt));
        if (evt.target) {
          console.log('目标对象的所有属性:', Object.keys(evt.target));
        }
      }
    } catch (error) {
      console.error('处理节点点击事件时出错:', error);
    }
  });
};

// ==================== 生命周期钩子 ====================
// 组件挂载时执行
onMounted(() => {
  // 初始化G6图形实例
  graph = new Graph({
    container: document.getElementById("mountNode"), // 容器元素
    layout: null, // 布局配置
    behaviors: [
      {
        type: 'drag-canvas',
        direction: 'x'
      }
    ], // 行为配置：拖拽画布
    edge: {
      // 边配置（空）
    },
    fitView: true, // 自适应视图
  });
  
  // 先渲染空图表
  graph.render();
  
  // 获取学生ID并调用接口
  const studentId = route.query.personCode || paramsStore.personCode; // 从路由或store获取学生ID
  if (studentId) {
    // 确保在初始化时也重置状态
    resetAllStates();
    fetchEvaluateData(studentId); // 获取评价数据
    fetchGrowthRecords(studentId); // 获取成长记录数据
  }

  refreshDataInterval();
  

  
  // 注释掉原有的图表初始化，等待数据加载后更新
  // const bar_right = echarts.init(barZongHSZhPJ.value);
  // bar_right.setOption(option);
  // const dadar = echarts.init(radarChart.value);
  // dadar.setOption(dadarOption);

  // 窗口大小变化监听
  window.addEventListener("resize", function () {
    // 图表自适应调整（已注释）
    // lineChart.resize();
    // areaLineChat.resize();
    // bar_right.resize();
    // dadar.resize();
  });
});

// ==================== 监听器 ====================
// 监听路由参数变化，重新获取数据
watch(() => route.query.personCode, (newPersonCode, oldPersonCode) => {
  if (newPersonCode && newPersonCode !== oldPersonCode) {
    console.log('学生切换，从', oldPersonCode, '到', newPersonCode);
    
    // 先重置所有状态，确保清除上一个学生的数据
    resetAllStates();
    
    // 然后获取新学生的数据
    fetchEvaluateData(newPersonCode); // 获取新的评价数据
    fetchGrowthRecords(newPersonCode); // 获取新的成长记录数据
  }
}, { immediate: true });

// 监听store中personCode的变化，作为额外的保障
watch(() => paramsStore.personCode, (newPersonCode, oldPersonCode) => {
  if (newPersonCode && newPersonCode !== oldPersonCode) {
    console.log('Store中personCode变化，从', oldPersonCode, '到', newPersonCode);
    
    // 如果路由参数没有变化，但store中的personCode变化了，也需要重置状态
    if (route.query.personCode !== newPersonCode) {
      // 先重置所有状态，确保清除上一个学生的数据
      resetAllStates();
      
      // 然后获取新学生的数据
      fetchEvaluateData(newPersonCode); // 获取新的评价数据
      fetchGrowthRecords(newPersonCode); // 获取新的成长记录数据
    }
  }
});

onUnmounted(() => { 
  if(ref_setInterval.value)
  {
    clearInterval(ref_setInterval.value);
    ref_setInterval.value = null;
  }
})

const ref_setInterval = ref(null);
const refreshDataInterval = () => { 
  if (import.meta.env.VITE_API_REFRESH_IsEnable == 0) {
    ref_setInterval.value = setInterval(() => {
        console.log('定时刷新数据');
        
      const studentId = route.query.personCode || paramsStore.personCode; // 从路由或store获取学生ID
      if (studentId) {
        // 定时刷新时不重置状态，只更新数据
        fetchEvaluateData(studentId); // 获取评价数据
        fetchGrowthRecords(studentId); // 获取成长记录数据
      }
    }, import.meta.env.VITE_API_REFRESH_INTERVAL);
  }
}


</script>

<!-- ==================== 样式部分 - 页面样式 ==================== -->
<style scoped="study-life-Container" lang="scss">
/* 图表容器通用样式 */
.chart-container {
  width: 100%; // 宽度100%
  height: 100%; // 高度100%
  position: relative; // 相对定位
}

/* 加载状态容器样式 */
.loading-container {
  position: absolute; // 绝对定位
  top: 0; // 顶部对齐
  left: 0; // 左侧对齐
  width: 100%; // 宽度100%
  height: 100%; // 高度100%
  display: flex; // 弹性布局
  align-items: center; // 垂直居中
  justify-content: center; // 水平居中
  background: rgba(0, 0, 0, 0.5); // 半透明背景
  z-index: 10; // 层级
}

/* 加载文字样式 */
.loading-text {
  color: #00FFB2; // 文字颜色
  font-size: 14px; // 字体大小
}

/* 主容器样式 */
.studyContainer {
  gap: 10px; // 间距
  height: 100%; // 高度100%

  /* 返回按钮样式 */
  .back-button {
    position: absolute; // 绝对定位
    top: 5px; // 顶部距离，与柱状图标题对齐
    right: 5px; // 右侧距离，靠最右边
    z-index: 20; // 层级
    background: linear-gradient(135deg, #00FFB2, #00FFF0); // 渐变背景
    color: #000; // 文字颜色
    padding: 4px 8px; // 内边距，缩小按钮
    border-radius: 12px; // 圆角，稍微减小
    font-size: 10px; // 字体大小，缩小
    cursor: pointer; // 鼠标指针
    transition: all 0.3s ease; // 过渡效果
    box-shadow: 0 1px 4px rgba(0, 255, 178, 0.3); // 阴影，减小
    
    &:hover {
      transform: translateY(-1px); // 悬停时上移，减小移动距离
      box-shadow: 0 2px 6px rgba(0, 255, 178, 0.5); // 悬停时阴影加深
    }
    
    span {
      font-weight: bold; // 字体粗细
    }
  }

  /* 标题样式 */
  .title {
    width: 100%; // 宽度100%
    height: 20px; // 高度20px
    line-height: 20px; // 行高20px
    text-align: left; // 左对齐
    vertical-align: middle; // 垂直居中
    border-left: 4px solid #00a7ff; // 左边框
    padding-left: 10px; // 左内边距
    border-radius: 2px; // 圆角
    margin-bottom: 5px; // 下边距
  }

  /* 板块1样式 - 成长记录 */
  .box1 {
    margin: 0px auto; // 外边距
    box-sizing: border-box; // 盒模型
    width: 99%; // 宽度99%
    height: 60%; // 高度60%
    
    /* 成长记录容器 */
    .chengJJL-container {
      width: 100%; // 宽度100%
      display: flex; // 弹性布局
      flex-direction: column; // 垂直排列
      gap: 2px; // 间距
      height: calc(100% - 25px); // 高度计算

      /* 成长记录项目 */
      .chengJJL-item {
        height: 40%; // 高度50%
        width: 100%; // 宽度100%
        display: flex; // 弹性布局
        gap: 2px; // 间距
        
        /* 右侧图表区域 */
        .chengJJL-itembox-right {
          flex: 1; // 弹性增长
        }

        /* 信息展示容器 */
        .chengJJL-itembox {
          flex: 1; // 弹性增长
          padding: 14px 12px; // 内边距
          border-radius: 5px;
          background-color: rgba(93,245,255,0.17);
          border: 2px solid rgba(0,252,237,1);
          height: calc(100% - 10px); // 高度计算
          box-sizing: border-box; // 盒模型
          overflow-y: scroll; // 垂直滚动
          
          /* 内部div样式 */
          div {
            line-height: 30px; // 行高
            font-size: 14px; // 字体大小
          }
        }
      }
    }
  }

  /* 板块2样式 - 综合素质评价 */
  .box2 {
    margin: 0px auto; // 外边距
    box-sizing: border-box; // 盒模型
    height: calc(40% - 10px); // 高度计算
    width: 99%; // 宽度99%
    
    /* 学习活动容器 */
    .xuekjhd-container {
      display: flex; // 弹性布局
      gap: 2px; // 间距
      height: calc(100% - 25px); // 高度计算
      
      /* 左侧图表区域 */
      .xuekjhd-itembox-left {
        flex: 40; // 弹性增长
        height: 100%; // 高度100%
      }

      /* 右侧图表区域 */
      .xuekjhd-itembox-right {
        flex: 60; // 弹性增长
        display: flex; // 弹性布局
        align-items: center; // 垂直居中
        justify-items: center; // 水平居中
        height: 100%; // 高度100%
        position: relative; // 相对定位，用于返回按钮的绝对定位
      }
    }
  }
}

/* 曲线列表样式（未使用） */
.curved-list {
  width: 300px; // 宽度
  position: relative; // 相对定位
  padding-left: 50px; // 左内边距
}

/* 日期样式（未使用） */
.dates {
  padding: 10px 0 20px 30px; // 内边距
  font-size: 14px; // 字体大小
  color: #666; // 文字颜色
}

/* 项目样式（未使用） */
.item {
  position: relative; // 相对定位
  padding: 15px 0; // 内边距
}

/* 连接器样式（未使用） */
.connector {
  position: absolute; // 绝对定位
  left: -30px; // 左侧偏移
  top: 0; // 顶部对齐
  bottom: 0; // 底部对齐
  width: 40px; // 宽度
}

/* 连接器伪元素样式（未使用） */
.connector::before {
  content: ""; // 内容
  position: absolute; // 绝对定位
  left: 0; // 左侧对齐
  top: 50%; // 顶部50%
  width: 30px; // 宽度
  height: 30px; // 高度
  border: 2px solid #ccc; // 边框
  border-color: #ccc transparent transparent #ccc; // 边框颜色
  border-radius: 50%; // 圆角
  transform: rotate(-45deg) translateY(-50%); // 变换
}

/* 内容样式（未使用） */
.content {
  padding-left: 20px; // 左内边距
}

/* 内容标题样式（未使用） */
.content-title {
  font-weight: bold; // 字体粗细
  margin-bottom: 5px; // 下边距
}

/* 描述样式（未使用） */
.desc {
  color: #666; // 文字颜色
  font-size: 14px; // 字体大小
}
</style>